import React, { useState } from 'react';

import {
  Upload,
  message,
  Button,
  Descriptions,
  Table,
  Anchor,
  Form,
  Radio,
  Divider,
  Modal,
  Input,
} from 'antd';
import { Image, Space } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
//接口绑定 1、导入http文件 2、终端运行yarn 3、配置前端的地址 4、引入HTTP文件

import request from '../../../http';
import SelectStudent from '../info/selectStudent';

import { ExclamationCircleOutlined } from '@ant-design/icons';

//李鸿 学生 个人信息管理

const Info = () => {
  //上传头像按钮
  const Uploader = () => {
    const props = {
      beforeUpload: (file: any) => {
        if (file.type !== 'image/png') {
          message.error(`${file.name} is not a png file`);
        }
        return file.type === 'image/png' ? true : Upload.LIST_IGNORE;
      },
      onChange: (info: any) => {
        console.log(info.fileList);
      },
    };
  };

  //个人信息展示
  // const userid = window.localStorage.getItem("userid");
  const [userInfo, SetUserInfo] = React.useState([]);
  React.useEffect(() => {
    const parms = {
      account: 1,
    };

    const parms1 = {
      email: emailData,
    };
    //个人信息展示请求
    request
      .post('/PersonalInfo/student/lookStuInformation', parms)
      .then((result: any) => {
        console.log('个人信息接口请求result.data的值');
        console.log(result.data);
        //个人信息展示
        SetUserInfo(result.data);
      });

    //实训小组成员接口
    // request
    //   .post('/PersonalInfo/student/lookStuProjectGroup', parms)
    //   .then((result: any) => {
    //     console.log(result);

    //     const data = result.data.map((item: any) => ({
    //       key: `p_${item.id}`,
    //       cname: item.cname,
    //       pgname: item.pgname,
    //       sname: item.sname,
    //       role: item.role,
    //       isleader: item.isleader === 0 ? '是' : '否',
    //       sch: item.sch,
    //       lch: item.lch,
    //       ssh: item.ssh,
    //       tel: item.tel,
    //     }));
    //     //实训小组成员列表
    //     console.log(data);
    //     setData1(data);
    //   });

    //项目得分接口
    request
      .post('/PersonalInfo/student/lookStuProjectGroupScore', parms)
      .then((result: any) => {
        console.log(result);
        const data4 = result.data.map((item: any) => ({
          key: `p_${item.id}`,
          cname: item.cname,
          pgname: item.pgname,
          p_score: item.pscore,
          score: item.gscore,
          ranking: item.ranking,
        }));
        //项目得分
        setData2(data4);
      });

    // //项目得分接口
    // request
    // .post('/PersonalInfo/student/stu_changeInformation_email', parms1)
    // .then((result: any) => {
    //   console.log("邮箱后台返回结果数据",result);

    //   //项目得分
    //   setData2(data4);
    // });

    //学生个人信息页面接口
    {
      /*
        //02上传头像 缺请求参数
        request
        .post('/PersonalInfo/student/uploadAvatar', parms)
        .then(
          (result: any) => {
            console.log("课程管理，新增按钮接口result数据",result);
            if (result.success) {
              //获得成功响应返回的数据
              console.log("课程管理，新增按钮接口result.data数据",result.data);
              const data4 = result.data.returnDate.map((item: any) => ({
                key: `p_${item.id}`,
              
              }));

              setData2(data4);
            }
          },
          (error) => {
            //错误返回错误信息
            console.log('请求错误');
          },
        );

        //03下载头像 缺请求参数
        request
        .get('/PersonalInfo/student/downloadAvatar',parms)
        .then(
          (result: any) => {
            console.log("课程管理，选择学生超链接result数据",result);
            if (result.success) {
              //获得成功响应返回的数据
              console.log("课程管理，选择学生超链接result.data数据",result.data);
              const data4 = result.data.returnDate.map((item: any) => ({
                key: `p_${item.id}`,
                
              }));

              setData2(data4);
            }
          },
          (error) => {
            //错误返回错误信息
            console.log('请求错误');
          },
        );

        //04学生更改邮箱 缺请求参数
        request
        .post('/PersonalInfo/student/stu_changeInformation_email', parms)
        .then(
          (result: any) => {
            console.log("课程管理，编辑超链接result数据",result);
            if (result.success) {
              //获得成功响应返回的数据
              console.log("课程管理，编辑超链接result.data数据",result.data);
              const data4 = result.data.returnDate.map((item: any) => ({
                key: `p_${item.id}`,
              }));

              setData2(data4);
            }
          },
          (error) => {
            //错误返回错误信息
            console.log('请求错误');
          },
        );

        //05学生更改电话 缺请求参数
        request
        .post('/PersonalInfo/student/stu_changeInformation_tel', parms)
        .then(
          (result: any) => {
            console.log("课程管理，删除超链接result数据",result);
            if (result.success) {
              //获得成功响应返回的数据
              console.log("课程管理，删除超链接result.data数据",result.data);
              const data4 = result.data.returnDate.map((item: any) => ({
                key: `p_${item.id}`,
              }));

              setData2(data4);
            }
          },
          (error) => {
            //错误返回错误信息
            console.log('请求错误');
          },
        );

        //06学生查看小组评分排行榜 缺请求参数
        request
        .post('/PersonalInfo/student/stu_lookGroupRanking', parms)
        .then(
          (result: any) => {
            console.log("课程管理，复制超链接result数据",result);
            if (result.success) {
              //获得成功响应返回的数据
              console.log("课程管理，复制超链接result.data数据",result.data);
              const data4 = result.data.returnDate.map((item: any) => ({
                key: `p_${item.id}`,
              }));

              setData2(data4);
            }
          },
          (error) => {
            //错误返回错误信息
            console.log('请求错误');
          },
        );
        
    */
    }
  }, []);

  //实训小组成员
  const [data3, setData1] = React.useState();
  //项目得分
  const [data4, setData2] = React.useState();
  const [emailData, setEmailData]: any = React.useState();
  const [telData, setTelData]: any = React.useState();

  //const [data, setData3] = React.useState();

  //加载失败显示图像占位符
  function ImageDemo() {
    return (
      <Image
        width={200}
        height={200}
        src="error"
        fallback=""
      />
    );
  }

  //上传头像按钮
  class ButtonSize extends React.Component {
    state = {
      size: 'large',
    };
  }
  //修改
  const { Link } = Anchor;
  const onChange = (link: string) => {
    console.log('Anchor:OnChange', link);
  };

  //表格
  //实训小组成员
  const columns1 = [
    {
      title: '项目名称',
      width: 100,
      dataIndex: 'cname',
      key: '1',
      fixed: 'left',
    },
    {
      title: '小组名称',
      width: 100,
      dataIndex: 'pgname',
      key: '2',
      fixed: 'left',
    },
    { title: '小组成员', dataIndex: 'sname', key: '3' },
    { title: '项目角色', dataIndex: 'role', key: '4' },
    { title: '组长', dataIndex: 'isleader', key: '5' },
    { title: '标准学时', dataIndex: 'sch', key: '6' },
    { title: '大课学时', dataIndex: 'lch', key: '7' },
    { title: '自习学时', dataIndex: 'ssh', key: '8' },
    { title: '联系电话', dataIndex: 'tel', key: '9' },
  ];

  //
  const data1 = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
    },
  ];
  //查看排行榜数据
  const [data10, setData6] = React.useState();

  //项目得分
  const columns3 = [
    { title: '序号', dataIndex: 'ranking', key: '1' },
    { title: '小组名称', dataIndex: 'name', key: '2' },
    { title: '分数', dataIndex: 'score', key: '3' },
  ];

  function info() {
    Modal.info({
      title: '查看小组排行榜',
      visible: isModalVisible,
      okText: '关闭',
      content: (
        <div>
          <h3>考勤管理系统</h3>
          <p>
            <Table columns={columns3} dataSource={data10} size="small" />
          </p>
        </div>
      ),
      onOk() {},
    });
  }

  const getXiaoZuPaiHang = (e: any) => {
    //查看小组排行榜接口
    console.log('排行榜数据', columns2.values);

    request
      .post('/PersonalInfo/student/stu_lookGroupRanking', {
        courseName: 'java1',
      })

      .then((result: any) => {
        console.log('小组排行榜result数据', result);

        const data = result.data.map((item: any) => ({
          key: `p_${item.id}`,
          name: item.name,
          score: item.score,
          ranking: item.ranking,
        }));
        //小组排行榜
        setData6(data);
      });
  };

  //项目得分
  const columns2 = [
    {
      title: '项目名称',
      width: 100,
      dataIndex: 'cname',
      key: '1',
      fixed: 'left',
    },
    {
      title: '小组名称',
      width: 100,
      dataIndex: 'pgname',
      key: '2',
      fixed: 'left',
    },
    { title: '个人得分', dataIndex: 'p_score', key: '3' },
    { title: '小组得分', dataIndex: 'score', key: '4' },
    { title: '小组排名', dataIndex: 'ranking', key: '5' },
    {
      title: '小组排行榜',
      key: 'operation',
      fixed: 'right',
      width: 150,
      render: (text: any, record: any) => (
        <Space size="middle">
          {/*<Button type="link" onClick={info}>
            查看
      </Button>*/}
          <Button
            type="link"
            onClick={(event) => {
              info();
              getXiaoZuPaiHang(0);
            }}
          >
            查看
          </Button>
        </Space>
      ),
    },
  ];

  const data2 = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
    },
  ];

  //面包屑按钮初始化
  //顶部选择按钮初始状态
  const btnStatus = [1, 0, 0];
  // 顶部选择按钮
  const [btnStyle, setBtnStyle] = React.useState(btnStatus);

  //修改邮箱
  const [isModalVisible, setIsModalVisible] = React.useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  //邮箱修改接口
  const handleOk = () => {
    console.log('页面邮箱返回数据', emailData, typeof emailData);

    request
      .post('/PersonalInfo/student/stu_changeInformation_email', {
        email: emailData,
      })
      .then((res: any) => {
        console.log('邮箱后台返回结果数据', res.message);
        if (res.ok) {
          //重载界面
          //location.reload(info());
        }
      });

    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  //修改手机号码
  const [isModalVisible01, setIsModalVisible01] = React.useState(false);

  const showModal01 = () => {
    setIsModalVisible01(true);
  };

  const handleOk01 = () => {
    console.log('页面电话号码返回数据', telData, typeof telData);
    request
      .post('/PersonalInfo/student/stu_changeInformation_tel', {
        tel: telData,
      })
      .then((res) => {
        console.log('电话号码后台返回结果数据', res);
      });
    setIsModalVisible01(false);
  };

  const handleCancel01 = () => {
    setIsModalVisible01(false);
  };

  return (
    <div>
      <div style={{ float: 'left', width: '200px', margin: '20px' }}>
        {/* 图片占位*/}
        <div style={{ float: 'left' }}>
          <ImageDemo />
        </div>
        <div style={{ marginLeft: '40px', marginTop: '30px' }}>
          {/*上传头像按钮*/}
          <Upload>
            <Button icon={<UploadOutlined />} onClick={Uploader}>
              上传头像
            </Button>
          </Upload>
        </div>
        <div style={{ marginLeft: '-5px', marginTop: '10px' }}>
          {/*危险文本*/}
          <Button type="text" danger>
            提示：为确保顺利通过人脸识<br></br>
            别进行打卡，请上传您的正脸<br></br>
            图片，请勿选择遮挡图、美颜<br></br>
            图。
          </Button>
        </div>
      </div>

      <div style={{ float: 'left', width: '800px', margin: '20px' }}>
        {userInfo.map((key: any) => (
          <div>
            <Descriptions title="个人信息展示" layout="vertical">
              <Descriptions.Item label="姓名">{key.userName}</Descriptions.Item>
              <Descriptions.Item label="学号">{key.account}</Descriptions.Item>
              <Descriptions.Item label="身份证号码">
                {key.cardid}
              </Descriptions.Item>
              <Descriptions.Item label="性别">{key.sex}</Descriptions.Item>
              <Descriptions.Item label="邮箱地址">
                {key.email}
                <Button type="link" onClick={showModal}>
                  修改
                </Button>
                <Modal
                  title="修改邮箱"
                  visible={isModalVisible}
                  onOk={handleOk}
                  onCancel={handleCancel}
                  okText="确认"
                  cancelText="取消"
                >
                  <p>请录入邮箱地址：</p>
                  <p>
                    <Input
                      onChange={(e) => {
                        console.log(e.target.value);
                        setEmailData(e.target.value);
                      }}
                    />
                  </p>
                  <p></p>
                </Modal>
              </Descriptions.Item>

              <Descriptions.Item label="手机号码">
                {key.tel}
                <Button type="link" onClick={showModal01}>
                  修改
                </Button>
                <Modal
                  title="修改手机号码"
                  visible={isModalVisible01}
                  onOk={handleOk01}
                  onCancel={handleCancel01}
                  okText="确认"
                  cancelText="取消"
                >
                  <p>请录入手机号码：</p>
                  <p>
                    <Input
                      onChange={(e) => {
                        console.log(e.target.value);
                        setTelData(e.target.value);
                      }}
                    />
                  </p>
                  <p></p>
                </Modal>
              </Descriptions.Item>

              <Descriptions.Item label="院系">{key.dkey}</Descriptions.Item>
              <Descriptions.Item label="专业">{key.gkey}</Descriptions.Item>
              <Descriptions.Item label="年级">{key.gradeKey}</Descriptions.Item>
              <Descriptions.Item label="班级">{key.name}</Descriptions.Item>
              <Descriptions.Item label="班主任">{key.userT}</Descriptions.Item>
              <Descriptions.Item label="班主任电话">
                {key.telT}
              </Descriptions.Item>
            </Descriptions>
          </div>
        ))}
        {/*学生信息显示*/}
      </div>
      <div>
        {/*面包屑按钮*/}
        <div
          style={{
            marginLeft: '260px',
            marginBottom: '0px',
            paddingBottom: '0px',
            border: '0px',
          }}
        >
          <div>
            <div className="btn-box">
              <Button
                className={btnStyle[0] === 1 ? 'isPointed' : 'noPointed'}
                onClick={() => {
                  setBtnStyle([1, 0, 0]);
                }}
                size="large"
              >
                实训小组成员
              </Button>
              <Button
                className={btnStyle[1] === 1 ? 'isPointed' : 'noPointed'}
                onClick={() => {
                  setBtnStyle([0, 1, 0]);
                }}
                size="large"
              >
                项目得分
              </Button>
            </div>
            {/* 实训小组成员 */}
            {/* {btnStyle[0] === 1 ? (
              <div>
                <Table
                  columns={columns1}
                  dataSource={data3}
                  scroll={{ x: 1300 }}
                />
              </div>
            ) : null} */}

            {/* 项目得分 */}
            {btnStyle[1] === 1 ? (
              <div>
                <Table
                  columns={columns2}
                  dataSource={data4}
                  scroll={{ x: 1300 }}
                />
              </div>
            ) : null}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Info;
